import { useEffect,useState } from "react";
function App() {
  // page 当前页面
  // list 数据
  // flag 是否可以请求
  const [page,setPage] = useState(1);
  const [list,setList] = useState([]);
  const [flag,setFlag] = useState(true);
  useEffect(()=>{
    fetch("http://dida100.com/mi/list.php?page="+page)
    .then(res=>res.json())
    .then(res=>{
      // 更新list
      setList(list.concat(res.result))
      // flag改为true
      // 下面useEffect会被再次执行
      setFlag(true);
    })
  },[page])
// 默认会执行一次，当page改变时候，再次执行

  // 如果flag改变了，监听页面滚动和
  useEffect(()=>{
    function check(){
      // 获取到最新的last
      var  last = document.querySelector(".item:last-child");
      // 如果flag为真并且最后一个元素进入页面
      if(flag&&last.getBoundingClientRect().top<=window.innerHeight){
        // 设置flag,当前这个useEffect有会被执行一次
        setFlag(false);
        // 设置page更新 ，上面useEffect会被执行
        setPage(page+1)
      }
    }
    // 监听滚动
    window.addEventListener("scroll",check);
    // 移除监听
    return ()=>{
      console.log("卸载了");
      window.removeEventListener("scroll",check);
    }

  },[flag])
  // 当flag发生变化（默认至少执行一次）
  return ( <div>
    <h1>笑话，触底刷新</h1> 
    {list.map((item,index)=><p key={index} className="item">{item.summary}</p>)}
    
    </div>);
}

export default App;